<template>
  <div v-show="dialogVisible" class="mask">
    <div class="inner">
      <svg-icon class="menu close" name="close" size="20" @click="closeDialog"></svg-icon>
      <div class="display" v-if="isTextFile">
        <h1 style="color: rgb(103, 194, 58)">识别结果如下: </h1>
        <div v-html="textContent"></div>
      </div>
      <div class="display" v-else>
        <el-image v-for="(item, index) in imgUrlArray" :src="item"  :key="index"></el-image>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, watch} from "vue";
import {FileUtils} from "@/utils/FileUtils";
import {ConfigUtils} from "@/utils/ConfigUtils";

export default defineComponent({
  name: "PreviewFile",
  props: {
    fileUrl: {
      type: String,
      default: ''
    }
  },
  setup(props, {emit}) {
    const dialogVisible = ref(false);
    const imgUrlArray = ref([] as string[]);
    const isTextFile = ref(false);
    const textContent = ref('');
    const showFile = (fileUrl: string) => {
      isTextFile.value = false;
      textContent.value = '';
      if (FileUtils.isPdf(fileUrl)) {
        const loadingTask = FileUtils.createLoadingTask(fileUrl);
        (async () => {
          let imageCanvasArray: Array<any> = [] ;
          imgUrlArray.value = [];
          await FileUtils.toImageArray(loadingTask, imageCanvasArray, imgUrlArray.value);
        })();
      } else if (FileUtils.isImage(fileUrl)) {
        imgUrlArray.value = [];
        imgUrlArray.value.push(fileUrl);
      } else if (FileUtils.isText(fileUrl)) {
        isTextFile.value = true;
        ConfigUtils.readText(fileUrl).then((res: any) => {
          textContent.value = res;
        })
      }
    }


    const closeDialog = () => {
      emit('listenProps');
      dialogVisible.value = false;
    }

    watch(() => props.fileUrl, (newUrl, oldUrl) => {
      showFile(newUrl);
      if (newUrl !== 'undefined') {
        dialogVisible.value = true;
      }
    });

    return {
      dialogVisible,
      imgUrlArray,
      textContent,
      isTextFile,
      closeDialog
    }
  }
});
</script>

<style scoped lang="scss">
  @import "./src/styles/variable.scss";
  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,.5);
    z-index: 1000;
    .inner {
      height: auto;
      max-height: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      max-width: 80%;
      border: 1px solid $color-border-base;
      box-shadow: 0 0 5px 0 rgba(0,0,0,0.06);
      overflow: auto;

      .menu {
        background-color: $color-background-base;
        position: relative;
        padding: 5px;
      }
      .close {
        right: 0;
        position: absolute;
        z-index: 1;
        cursor: pointer;
      }
      .display {
        color: $color-sub-text-base;
        background-color: $color-background-base;
        overflow: auto;
      }
    }
  }
</style>